

{% load static %}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <title>抖查查测试平台</title>
      <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->

  </head>
  <body>
    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
    <h5 class="my-0 mr-md-auto font-weight-normal">{{ request.session.user_name }}</h5>
      <nav class="my-2 my-md-0 mr-md-3">
        <a class="p-2 text-dark" href="#">项目</a>
        <a class="p-2 text-dark" href="/Dcc/caseapi/">测试列表</a>
        <a class="p-2 text-dark" href="#">测试工具</a>
        <a class="p-2 text-dark" href="/Dcc/case_report/">测试报告</a>

      </nav>
    <a class="btn btn-outline-primary" href="/login/index/">返回</a>
    </div>
        <div class="row">
          <div class="col-xs-6 col-md-4"></div>
            <div class="col-xs-6 col-md-4 text-center"><h4>{{ script.Mobile_phone_brands }}_{{ script.phone_brands_version }}_详细报告</h4><h6>{{ Data_time }}</h6></div>
          <div class="col-xs-6 col-md-4"></div>
        </div>
        <div class="col-20 form-group"  style="border-bottom: 1px solid #000000"></div>
         <div class="row well">
             <div class="col-xs-3 col-md-3 text-center"><a class="text-muted">测试:{{ phone_status }}</a></div>
             <div class="col-xs-3 col-md-3 text-center"><a class="text-muted">影响用户问题有:{{ error }}</a></div>
             <div class="col-xs-3 col-md-3 text-center"><a class="text-muted">系统:{{ script.Android_version }}</a></div>
             <div class="col-xs-3 col-md-3 text-center"><a class="text-muted">分辨率:{{ script.phone_px }}</a></div>
        </div>
         <div class="row well">
             <div class="col-xs-6 col-md-4 text-center"> <a>问题汇总</a><div id="error" style="width: 500px;height:200px;"></div></div>
              <div class="col-xs-6 col-md-3 text-center"></div>
            <div class="col-xs-6 col-md-4 text-center"> <a>启动耗时</a></a><div id="time_h" style="width: 500px;height:200px;"></div></div>
        </div>

         <div class="row well">
                 <div class="col-xs-6 col-md-4 text-center"> <a>CPU占比</a></a><div id="phone_cpu" style="width: 500px;height:200px;"></div></div>
                  <div class="col-xs-6 col-md-2 text-center"></div>
                 <div class="col-xs-6 col-md-4 text-center"> <a>内存占比</a><div id="ram" style="width: 500px;height:200px;"></div></div>
            </div>
{#         <div class="row well text-center">#}
        <table data-table class="table table-hover">
            <thead>
             <tr bgcolor="#d1ecf1" >
                 <th class = 'text-center text-muted'>步骤截图</th>
             </tr>
            </thead>
            <tbody>
                <tr class="">
                    {% for  value in pngname %}
                       <td class='text-center'>
                                <a  href ="{{ value }}" class="thumbnail">
                                    <img src="{{ value }}"  class="img-thumbnail"  width="204" height="136">
                                </a>
                       </td>
                     {% endfor %}
                </tr>
            </tbody>
           </table>
             <div class="row well">
                 <div class="col-xs-6 col-md-2 text-center">
                      <table data-table class="table table-hover">
                            <thead>
                                 <tr bgcolor="#d1ecf1" >
                                     <th class = 'text-center text-muted'>步骤视频和日志下载</th>
                                 </tr>
                            </thead>
                            <tbody>
                                <tr class="">
                                       <td class='text-center'>
                                            <a  href ="{{ videoname }}" class="thumbnail">
                                                <video src="{{ videoname }}" controls="controls" width="304" height="236">
                                                    your browser does not support the video tag
                                                </video>
                                            </a>
                                       </td>
                                     <td class='text-center'>
                                            <a href="/Dcc/applog_download/?logname={{ logname }}" class="badge badge-info">下载日志</a>
                                       </td>

                                </tr>
                            </tbody>
                       </table>
                 </div>
            </div>
{#        </div>#}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js" > </script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js" ></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js" ></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js" ></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js" ></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js" > </script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js" ></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        // 绘制图表。
        echarts.init(document.getElementById('error')).setOption({

            series: {
                color: ['#17a2b8','#20c997','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
                type: 'pie',
                data: [
                    {name: '报错{{ Causedby }}个', value: {{ Causedby }}},
                    {name: '安装{{Install_count}}个', value: {{Install_count}}},
                     {name: '卸载{{Uninstall_count}}个', value: {{Uninstall_count}}}
                ]
            }
        });
    </script>
    <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('time_h'));

            // 指定图表的配置项和数据
            var option = {
                'color': ['#17a2b8','#20c997','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
                'title': {

                },
                'tooltip': {},
                'legend': {

                },
                'xAxis': {
                    'data': []
                },
                'yAxis': {},
                'series': [{
                    'name': '热启动耗时：{{ script.time_h }}ms',
                    'type': 'bar',
                    'data': []
                },{
                    'name': '冷启动耗时：{{ script.time_c }}ms',
                    'type': 'bar',
                    'data': []
                }]
            };
            option['series'][0]['data'].push("{{ script.time_h }}");
            option['series'][1]['data'].push("{{ script.time_c }}");
            option['xAxis']['data'].push("{{ script.phone_brands_version }}");


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>

    <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('phone_cpu'));


            // 指定图表的配置项和数据
            var option = {
                'color': ['#17a2b8','#20c997','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
                'title': {

                },
                'tooltip': {},
                'legend': {

                },
                'xAxis': {
                    'data': []
                },
                'yAxis': {},
                'series': [{
                    'name': '最大占用：{{phone_cpu_sorted}}%',
                    'type': 'line',
                    'data': []
                }]
            };
            {% for item in cpu_y %}
                option['series'][0]['data'].push("{{ item }}");
            {% endfor %}
            {% for item in cpu_x %}
                option['xAxis']['data'].push("{{ item }}");
            {% endfor %}
            console.log(option)

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('ram'));

        // 指定图表的配置项和数据
            var option = {
                'color': ['#17a2b8','#20c997','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
                'title': {

                },
                'tooltip': {},
                'legend': {

                },
                'xAxis': {
                    'data': []
                },
                'yAxis': {},
                'series': [{
                    'name': '最大占用：{{phone_dumpsys_sorted}}%',
                    'type': 'line',
                    'data': []
                }]
            };
            {% for item in dumpsys_y %}
                option['series'][0]['data'].push("{{ item }}");
            {% endfor %}
            {% for item in dumpsys_x %}
                option['xAxis']['data'].push("{{ item }}");
            {% endfor %}
            console.log(option)

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
    </script>

  </body>
</html>
